import DocCardBox from "@/components/doc-card"
import React from "react"
import { demoJson } from "./demo"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"
import { Loading } from "esy-ui"

const leftList = [
    {
        titleKey: "default",
        hash: "lod-l-demo1",
        coms: [<Loading key={0} />],
        comsJson: [demoJson("")],
        desc: [{ text: "lod_1_1_1" }]
    },
    {
        titleKey: "wave",
        hash: "lod-l-demo2",
        coms: [<Loading key={0} type="wave" />],
        comsJson: [demoJson('type="wave"')],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "lod_2_1_1" }, { text: "lod_2_1_2", textType: "tag" }, { text: "lod_2_1_3" }, { text: "wave", textType: "tag" }, { text: "lod_3_1_5" }]
            }
        ]
    },
    {
        titleKey: "lod_title_1",
        hash: "lod-l-demo3",
        coms: [<Loading key={0} loading={false} />],
        comsJson: [demoJson("loading={false}")],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "lod_5_1_1" }, { text: "lod_5_1_2", textType: "tag" }, { text: "lod_5_1_3" }, { text: "lod_5_1_4", textType: "tag" }, { text: "lod_5_1_5" }, { text: "lod_5_1_6", textType: "tag" }, { text: "lod_5_1_7" }]
            }
        ]
    }
]

const rightList = [
    {
        titleKey: "cube",
        hash: "lod-r-demo1",
        coms: [<Loading key={0} type="cube" />],
        comsJson: [demoJson('type="cube"')],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "lod_2_1_1" }, { text: "lod_2_1_2", textType: "tag" }, { text: "lod_2_1_3" }, { text: "cube", textType: "tag" }, { text: "lod_2_1_5" }]
            }
        ]
    },
    {
        titleKey: "spinner",
        hash: "lod-r-demo2",
        coms: [<Loading key={0} type="spinner" />],
        comsJson: [demoJson('type="spinner"')],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "lod_2_1_1" }, { text: "lod_2_1_2", textType: "tag" }, { text: "lod_2_1_3" }, { text: "spinner", textType: "tag" }, { text: "lod_4_1_5" }]
            }
        ]
    }
]

function Loadings() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "LoadingProps",
            data: [
                {
                    schema: "type",
                    type: "LoadingType",
                    defaultValue: "circle",
                    isRequire: t("no"),
                    desc: t("desc_lod_1")
                },
                {
                    schema: "loading",
                    type: "boolean",
                    defaultValue: "true",
                    isRequire: t("no"),
                    desc: t("desc_lod_2")
                },
                {
                    schema: "classNames",
                    type: "LoadingClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_lod_7")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Loading" desc="loadingsDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default Loadings
